<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,user-scalable=no,
		initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">
		<link rel="stylesheet" type="text/css" href="css/normalize.css">
		<link rel="stylesheet" href="css/swiper.min.css">
		<link rel="stylesheet" type="text/css" href="css/index.css">
		<title></title>
	</head>
	<body>
		<section class="warp">
		<header class="header">黑马面面</header>
		<nav class="nav">
			<a href="#" class="item">
				<img src="./icons/icon1.png">
				<span>HR面试</span>
			</a>
			<a href="#" class="item">
				<img src="./icons/icon2.png">
				<span>笔试</span>
			</a>
			<a href="#" class="item">
				<img src="./icons/icon3.png">
				<span>技术面试</span>
			</a>
			<a href="#" class="item">
				<img src="./icons/icon4.png">
				<span>模拟面试</span>
			</a>
			<a href="#" class="item">
				<img src="./icons/icon5.png">
				<span>面试技巧</span>
			</a>
			<a href="#" class="item">
				<img src="./icons/icon6.png">
				<span>薪资查询</span>
			</a>
		</nav> 
		<section class="go">
			<img src="./images/go.png">
		</section>
	</section>
	<section class="content">
		<div class="con-hd">
			<h4>
				<span><img src="./icons/i2.png"> </span>
				就业指导
			</h4>
			<a href="#">更多>></a>
		</div>
		<div class="lbt">
			<!-- Swiper -->
      <div class="swiper-container lbt_fo">
      <div class="swiper-wrapper">
      <div class="swiper-slide">
		  <a href="#"><img src="./images/pic.png" alt=""></a>
		  <p>老师教你应对面试技巧</p>
	  </div>
      <div class="swiper-slide">
		<a href="#"><img src="./images/pic1.png" alt=""></a>
		<p>滴滴滴滴</p>
	</div>
	<div class="swiper-slide">
		<a href="#"><img src="./images/pic2.png" alt=""></a>
		<p>哒哒哒哒</p>
	</div>
    </div>
  </div>
  <div class="swiper-button-next"></div>
  <div class="swiper-button-prev"></div>
		</div>
	</section>
	<section class="content padd-bot">
		<div class="con-hd">
			<h4>
				<span><img src="./icons/i1.png"> </span>
				充电学习
			</h4>
			<a href="#">更多>></a>
		</div>
		<div class="study">
		<div class="swiper-container study">
			<div class="swiper-wrapper">
			  <div class="swiper-slide">
				  <a href="#"><img src="./images/pic1.png" alt=""></a>
				  <h4>说地道英语，告别中式英语</h4>
				  <p><span>156</span>人学习</p>
			  </div>
			  <div class="swiper-slide">
				<a href="#"><img src="./images/pic2.png" alt=""></a>
				<h4>思维攻略金字塔思维提升写作能力</h4>
				<p><span>125</span>人学习</p>
			</div>
			</div>
		</div>
		  </div>	
	</section>
	<div class="bot-nav">
		<a href="#" class="item">
			<img src="./icons/home.png" alt="">
			<p>首页</p>
		</a>
		<a href="#" class="item">
			<img src="./icons/net.png" alt="">
			<p>技术面试</p>
		</a>
		<a href="#" class="item">
			<img src="./icons/ms.png" alt="">
			<p>模拟面试</p>
		</a>
		<a href="#" class="item">
			<img src="./icons/user.png" alt="">
			<p>我的主页</p>
		</a>
	</div>
	<script type="text/javascript" src="js/flexible.js"></script>
        <script src="js/swiper.min.js"></script>
		<script>
			// 第一个轮播图
			( function () {
				var swiper = new Swiper('.lbt_fo', {
			  slidesPerView: 2,
			  spaceBetween: 30,
			//   是否之中间的为主盒子，默认的是最左面的盒子
			  centeredSlides: true,
			  loop: true,
			//   左右箭头
			  navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
              },
			  });
			})();
			// 第二个轮播图
			( function () {
				var swiper = new Swiper('.study', {
					// 可见个数
                slidesPerView: 2.4,
                // 两个盒子之间的横向距离
                spaceBetween: 20,
				// 是否循环
	            loop: true,
              });
			})();
		  </script>
	</body>
</html>
